<template>
	<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" @down="downCallback" :up="upOption">
		<view class="container recharge-order">
			<view v-for="(item, index) in list" :key="index" class="order-item dis-flex flex-x-between flex-y-center">
				<view class="item-left flex-box">
					<view class="rec-status">
						<text>{{ item.describe }}</text>
					</view>
					<view class="rec-time">
						<text>{{ item.create_time }}</text>
					</view>
				</view>
				<view :class="'item-right ' + (item.money > 0 ? 'col-green' : 'col-6')">
					<text>{{ item.money > 0 ? '+' : '' }}{{ item.money }}</text>
				</view>
			</view>
		</view>
	</mescroll-body>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
export default {
	mixins: [MescrollMixin],
	data() {
		return {
			list: [], // 充值记录
			upOption: {
				page: {
					size: 15
				}
			}
		};
	},
	
	methods: {
		/**
		 * 获取积分明细列表
		 */
		upCallback(mescroll) {
			this.$u.api
				.getBalanceLog(mescroll.num)
				.then(res => {
					let resList = res.data.list;
					if (mescroll.num == 1) {
						this.list = resList.data;
					} else {
						this.list.push(...resList.data);
					}
					this.mescroll.endBySize(resList.data.length, resList.total);
				})
				.catch(e => {
					this.mescroll.endErr();
				});
		}
	}
};
</script>

<style>
page,
.container {
	background: #fff;
}

.recharge-order {
	padding: 0 30rpx;
}

.order-item {
	font-size: 28rpx;
	padding: 20rpx 20rpx;
	line-height: 1.8;
	border-bottom: 1rpx solid rgb(238, 238, 238);
}

.rec-status {
	color: #333;
}

.order-item .rec-time {
	color: rgb(160, 160, 160);
	font-size: 26rpx;
}
</style>
